<template>
  <view class="content">
    <u-sticky h5-nav-height="0">
      <view class="search">
        <view class="searchBox">
          <i class="iconfont icon-sousuo"></i>
          <input
            type="text"
            placeholder-style="color:#9B9B9B;"
            placeholder="请输入商家或商品名称"
            v-model="goods_name"
            @confirm="clear"
          />
        </view>
      </view>
    </u-sticky>

    <goodsList
      :tab="tab"
      :active="active"
      :items="goods"
      :newGoods="goods_ids"
      @handel="handel"
      @add="addCart"
    ></goodsList>
    <view class="footerBox">
      <goodsAddCart
        :good="goodsOfAdd"
        @callBack="handel('addCart')"
      ></goodsAddCart>
    </view>

    <footerCart ref="footer"></footerCart>
  </view>
</template>

<script>
import goodsList from "../components/goodsList";
import footerCart from "../components/footerCart";
import goodsAddCart from "@/components/diyNew/goodsAddCart/index.vue";

import { newUserPushGoods, newUser as info } from "@/api/marketing/newUser";

export default {
  components: {
    goodsList,
    goodsAddCart,
    footerCart,
  },

  data() {
    return {
      goods_ids: "",
      goods: [],
      active: "",
      tab: [],
      goodsOfAdd: {}, // 添加到购物车的商品
      goods_name: "",
      isEnd: false,
      limit: 10,
      page: 1,
      searchParam: null,
      first: true,
    };
  },

  async onLoad() {
    const infoRes = await info();
    if (!infoRes.code) {
      if (infoRes.data.goods_ids) {
        this.goods_ids = infoRes.data.goods_ids;
      }
    }

    this.clear();
  },

  methods: {
    async clear() {
      this.goods = [];
      this.isEnd = false;
      this.page = 1;
      this.searchParam = null;

      let { goods_name } = this;

      const goodsRes = await newUserPushGoods({ goods_name });
      if (!goodsRes.code) {
        if (!goods_name) {
          this.tab = goodsRes.data.conf || [];
          this.item = this.tab[0];
          this.active = this.item.tab;
          this.first = false;
        } else {
          this.tab = [];
          this.active = "";
          this.item = null;
          this.searchParam = { goods_id: goodsRes.search_goods_ids.join(",") };
        }

        this.getGoodsList();
      }
    },

    handel(type, item) {
      switch (type) {
        case "tab":
          if (this.active !== item.tab) {
            this.active = item.tab;
            this.item = item;
            this.goods = [];
            this.isEnd = false;
            this.page = 1;
            this.searchParam = null;
            this.getGoodsList();
          }
          break;

        case "addCart":
          this.$nextTick(() => {
            this.$refs.footer.init();
          });
          break;
      }
    },

    addCart(item) {
      let goods = Object.assign({}, item);
      this.goodsOfAdd = goods;
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },

    async getGoodsList() {
      let { limit, page, item, searchParam } = this,
        params = {};
      if (!searchParam) {
        if (item.cat_ids) {
          params.cat_id = item.cat_ids;
        } else {
          params.goods_id = item.goods_ids.join(",");
        }
      } else {
        params = {
          ...searchParam,
        };
      }

      params.limit = limit;
      params.page = page;

      let res = await this.$allrequest.diy.getGoodsList(params, true);

      if (!res.code) {
        let { goods: oldList } = this,
          { row_count, list } = res.data;

        if (list.length) {
          oldList.push(...list);
          this.page = this.page + 1;
        }

        if (oldList.length >= parseInt(row_count)) {
          this.isEnd = true;
        }
      }
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getGoodsList();
  },
};
</script>

<style lang="less" scoped>
.footerBox {
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}

.content {
  background: #f0f0f0;
  min-height: 100vh;
}

.search {
  padding: 10rpx 30rpx;
  background: #fff;
}

.searchBox {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  border-radius: 32px;
  background: #f2f2f2;

  input {
    margin-left: 10rpx;
    flex: 1;
    height: 64rpx;
    overflow: hidden;
    font-size: 26rpx;
    color: #333;
  }

  .iconfont {
    color: #9b9b9b;
  }
}
</style>
